<template>
  <view
    class="mForm popPof"
     v-if="show"
    :style="[{ paddingTop: 'calc(' + statusBarHeight + 'px + 44px)' }]"
  >
    <view class="mFormContent">
      <view class="mForBox">
        <view class="mFormItem">
          <view class="let">{{ $t("order.expressMethos") }}</view>
          <view class="rig">
            <view class="inp">
              <checkbox-group class="checkBox" @change="checkboxChange">
                <label v-for="item of goodsDeliveryType" :key="item.key">
                  <checkbox
                    :style="{ transform: 'scale(0.7)' }"
                    :value="item.key"
                    :checked="item.checked"
										:disabled="disabledDeliveryType"
                  />{{ item.value }}
                </label>
              </checkbox-group>
            </view>
          </view>
        </view>

        <view v-if="isShow">
          <view class="mFormItem" @click="openPicker('showFreightPop')">
            <view class="let">{{ $t("title.freight") }}</view>
            <view class="rig">
              <view class="inp"
                >{{ getPickerValue(postageList, freight, "id", "name") }}
              </view>
              <view class="icon">
                <i class="iconfont icon-arrow-right"></i>
              </view>
            </view>
          </view>
          <u-select
            v-model="showFreightPop"
            mode="single-column"
            value-name="id"
            label-name="name"
            :list="postageList"
            :defaultValue="defaultValue"
            @confirm="(e, i) => bindPickerChange(e, 'single-column', 'freight')"
          ></u-select>

          <view class="mFormItem">
            <view class="let">{{ $t("admin.freeShipping") }}</view>
            <view class="rig">
              <view class="inp">
                <u-input
                  input-align="right"
                  type="number"
                  v-model="forehead"
                  :placeholder="$t('admin.noLimit')"
                  @blur="(e) => changeInp(e, 'forehead')"
                ></u-input>
              </view>
              <view class="inpSort">件</view>
            </view>
          </view>

          <view class="mFormItem">
            <view class="let">{{ $t("admin.fullMoney") }}</view>
            <view class="rig">
              <view class="inp">
                <u-input
                  input-align="right"
                  type="digit"
                  v-model="pieces"
                  :placeholder="$t('admin.noPrice')"
                  @blur="(e) => changeInp(e, 'pieces')"
                ></u-input>
              </view>
              <view class="inpSort">元</view>
            </view>
          </view>
        </view>
      </view>

      <view class="editFooter">
        <view class="btn">
          <u-button
            :customStyle="customStyle"
            :hoverStartTime="hoverStartTime"
            @click="save"
            >{{ $t("my.save") }}</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },

    customStyle: {
      type: Object,
      default() {
        return null;
      },
    },

    hoverStartTime: {
      type: Number,
    },

    postageList: {
      type: Array,
      default() {
        return [];
      },
    },

    goodsDeliveryType: {
      type: Array,
      default() {
        return [];
      },
    },
		
		disabledDeliveryType: {
			type: Boolean,
			default: false,
		}
  },

  watch: {
    postageList: {
      handler(val) {
        if (!val.length) return;
        this.freight = val.find((el) => el.is_enable === "1").id;
        this.defaultValue = [val.findIndex((el) => el.is_enable === "1")];
      },
      deep: true,
    },
  },

  computed: {
    getPickerValue() {
      return (list, value, valueName, labelName) => {
        if (!list.length) {
          return this.$t("newAdmin.warning.pleaseSelect");
        }

        let item = list.find((el) => el[valueName] === value);
        
        return item
          ? item[labelName]
          : this.$t("newAdmin.warning.pleaseSelect");
      };
    },

    isShow() {
      if (this.delivery_type.indexOf("express") === -1) {
        return false;
      }

      return true;
    },
  },

  data() {
    return {
      delivery_type: [], //配送方式
      freight: "", // 运费设置
      forehead: "0", //单品满件包邮
      pieces: "0.00", //单品满额包邮
      showFreightPop: false,
      defaultValue: [],
    };
  },

  methods: {
    save() {
      let { delivery_type, freight, forehead, pieces } = this;

      this.Emit.$emit("logistics", {
        delivery_type,
        freight,
        forehead,
        pieces,
      });
    },

    setData(data) {
      this.delivery_type = data.delivery_type;
      this.freight = data.freight;
      this.forehead = data.forehead;
      this.pieces = data.pieces;
    },

    checkboxChange(e) {
      let { value } = e.detail;
      this.delivery_type = value;
    },

    changeInp(e, el) {
      if (el === "pieces") {
        this[el] = parseFloat(e).toFixed(2);
      } else {
        this[el] = parseInt(e);
      }
    },

    openPicker(el) {
      this[el] = true;
    },

    bindPickerChange(e, mode, el) {
      switch (mode) {
        case "single-column":
          this[el] = e[0].value;
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.popPof {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  z-index: 1100;
  overflow: hidden;

  /* #ifdef H5 */
  padding-top: 0 !important;
  /* #endif */
}

.mFormContent {
  overflow-y: auto;
  padding: 24rpx 0 160rpx;
  height: 100%;
}

.mForBox {
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 100rpx;
  background: #fff;
  font-size: 30rpx;
  color: #1d1d1d;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }

  .inpSort {
    margin-left: 10rpx;
  }

  .rig {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 10rpx;
  }

  .inp {
    flex: 1;
    text-align: right;
  }

  .input {
    height: 100rpx;
    line-height: 100rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .icon-arrow-right {
    font-size: 22rpx;
    color: #888;
  }
}

.checkBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .uni-checkbox-input {
    margin-top: 0;
  }
}
</style>
